<template>
    <div class="wrap">
        <div class='column' v-if="doctorList.length">
            <div class='column doctor-fixed' ref="doctorFixed">
                <div class='doctor-wrap flex'>
                    <div class="doctor-active column" :class="{'busy':doctorActive.online_status == 0}" @click='goDetail(doctorActive.doctorid)'>
                        <img :src='doctorActive.avatar' class='imgActive'></img>
                        <div class='name overhidden'>{{doctorActive.doctorname}}</div>
                        <p class='status flex'>{{doctorActive.online_status == 1?'在线':'离线'}}</p>
                    </div>
                    <div class='doctor flex'>
                        <div :class="{'busy':item.online_status == 0}" class="doctor-list column" v-for="(item,index) in doctorList" :key="index" @click='changeDoctorTap(index)' v-if='navIdx !== index'>
                            <img :src='item.avatar' class='imgActive'></img>
                            <div class='name overhidden'>{{item.doctorname}}</div>
                            <p class='status flex'>{{item.online_status == 1?'在线':'离线'}}</p>
                        </div>
                    </div>
                    <div class='line flex'>
                        <img src='../assets/line.png'></img>
                    </div>
                </div>
                <div class='infomation-wrap column'>
                    <div class='infomation-item border flex'>
                        <p class='bold label'>擅长领域：</p>
                        <p class='txt overhidden'>{{doctorInfo.doctor_illness || '暂无'}}</p>
                    </div>
                    <div class='infomation-item border flex start'>
                        <p class='bold label'>在线时间：</p>
                        <div class='column'>
                            <p class='txt'>{{doctorInfo.online_status == 1?doctorInfo.now_work_time : '该专家未在线'}}</p>
                            <p class='tips' v-if="doctorInfo.online_status == 1">该时间段内医生未进行会诊时自动退还咨询费。</p>
                        </div>
                    </div>
                    <div class='infomation-item flex' v-if="doctorInfo.online_status == 1">
                        <p class='bold label'>当前咨询人数：</p>
                        <div class='txt flex'>{{doctorInfo.now_visit_number}}人
                            <p class='tips' v-if="doctorInfo.now_visit_number>0">({{doctorInfo.now_visit_time}})</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class='diagnose-wrap column' :style="{marginTop:top + 'px'}">
                <div class='diagnose-item column' v-for="(item,index) in doctorInfo.recipe_bill" :key="index" @click='goDurgDetail(item.recipeid,item.status_confirm)'>
                    <div class='time flex' @click="goMap(item.showorgname,item.orgid)">
                        <span class='red' v-if="item.showorgname == 1">{{item.orgname || ''}}</span>
                        <span v-if="item.showorgname == 0">在线</span>
                        <span>{{item.registrationtype || ''}}（{{item.createtime}}）</span>
                    </div> 
                    <!-- 药品单 处方未过期 -->
                    <div class='content column' v-if="item.recipestatus != 301">
                        <div class='content-item flex'>
                            <div class='item-left between flex'>
                                <span class='bold'>辩证：</span>
                                <span class='txt'>{{item.discrim}}</span>
                                <span class='status' v-if="item.status != 1">{{item.status == 0?'待付款':item.status == 3?'已失效':'待付款'}}</span>
                                <span class='status' v-if="item.status == 1">{{item.status_confirm == 0?'待发货':item.status_confirm == 1?'待收货':item.status_confirm == 2?'已收货':''}}</span>
                            </div>
                        </div>
                        <!-- <div class='content-item flex' v-if="item.thumb">
                            <div class='item-left flex'>
                                <span class='bold'>药品单：</span>
                                <img :src='item.thumb'  class='imgActive bill-img' @click='previewImg(item.thumb)'></img>
                            </div>
                        </div> -->
                        <div class='content-item flex' v-if="item.preview_recipe == 1">
                            <span class='bold'>处方：</span>
                            <span class='txt bold recipe'>{{item.text}}</span>
                        </div>
                        <div class='content-item column' v-if="item.preview_recipe == 0">
                            <div class='title'>购药后可查看处方</div>
                            <span class='tips'>注：本药方只针对本次患者就诊，非患者本人或病情改变，请重新咨询就诊</span>
                        </div>
                    </div>
                    <!-- 处方已过期 -->
                    <div class='content column' v-else>
                        <div class='content-item flex'>
                            <div class='item-left between flex'>
                                <span class='bold'>辩证：</span>
                                <span class='txt'>{{item.discrim}}</span>
                                <span class='status'>已过期</span>
                            </div>
                        </div>
                        <div class='content-item column'>
                            <div class='title flex'>处方已过期</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='online flex' v-if="!showLoading">
                <div class='online-btn flex' @click="goChatTap" >点击进入线上会诊</div>
                <span class='num flex' v-if="doctorInfo.messagenum>0">{{doctorInfo.messagenum}}</span>
            </div>
            <div class='redio-wrap column' @click='videoChatTap'>
                <img src='../assets/avaral.png'  class='avaral-img'></img>
                <img src='../assets/redio.png' class='redio-img'></img>
                <span>附近门诊视频就诊</span>
            </div>
        </div>
        <!-- 空数据 -->
        <div class='empty-wrap'  v-else>
            <img src='../assets/bg.png' class='bg'></img>
            <div class='intro column'>
                <div class='txt'>诊禾医馆拥有百余中医权威专家，</div>
                <div class='txt'>在线给您解答各种病情问题</div>
                <div class='txt'>在这里，您可以线上问诊</div>
                <div class='txt'>无法解释清楚的病情可以去附近门诊</div>
                <div class='txt'>与专家视频进行会诊</div>
                <div class='find-btn flex' @click='findDoctorTap' >在线找名医</div>
                <div class='radio-wrap column' @click='videoChatTap'>
                    <img src='../assets/consult.png' class='radio-img'></img>
                    <p>附近门诊视频会诊</p>
                </div>
            </div>
        </div>

        <!-- 弹窗 -->
        <div class='layer' v-if="phoneShow">
            <div class="windows column" :class="{'heightShow':phoneShow}">
                <div class='title'>
                    <p>请填写您的手机号码，医生才能及时跟您取得联系：</p>
                    <div class='close-wrap' @click='closeTap'>
                        <img src='../assets/close.png'></img>
                    </div>
                </div>
                <div class='form-wrap column'>
                    <div class='form-item'>
                        <p class='label flex'>手机号码</p>
                        <input type='number' v-model="phone"  @input="phoneInput($event)"></input>
                    </div>
                    <div class='form-item'>
                        <p class='label flex'>验证码</p>
                        <input type='number' v-model="code"></input>
                        <div class="get-code" :class="{'disabled':codeFlag}" @click='getCodeTap'>{{getCodeTxt}}</div>
                    </div>
                </div>
                <div class='pay-btn flex' @click='goChatTrueTap'>确定</div>
            </div>
        </div>
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>
        <Bar :active='active'></Bar>
    </div>
</template>

<script>
import Bar from "./Bar";
import {
  getMstr,
  userinfo,
  mydoctors,
  mydoctorsinfo,
  createWeixinJssdk
} from "./../api/index";
import wx from "weixin-js-sdk";
import { MessageBox } from 'mint-ui';
export default {
  data() {
    return {
      active: "ask",
      flag: true, //防止多次跳转的变量
      doctorList: [], //医生列表
      doctorActive: {
        avatar: "",
        doctorname: "",
        online_status: "",
        doctorid: "",
        userid: ""
      }, //当前医生的信息
      navIdx: 0, //当前医生的下标索引
      doctorInfo: "", //医生详情
      phoneShow: false, //显示弹窗
      codeFlag: true, //控制获取验证码按钮的样式
      phone: "", //手机号码
      code: "", //验证码
      getCodeTxt: "获取验证码",
      timer: "", //倒计时定时器,
      showLoading: true, //加载中
      outTime: 1500,
      top: "" //医生基本信息部分的页面高度
    };
  },
  mounted() {
    let url = window.location.href;
    let mstr = url.split("=")[1];
    //'iJWxQMjlhXknuSPwFzrSUP6b255eesGbR1d7d7AY4Ww4672bHeMgA5ab99VkMeje0400JatGu70ab981fQi6fdqckiFbtHB3LE6YNJA' 
    if (mstr) {
      sessionStorage.setItem("mstr", mstr);
    }
    if(sessionStorage.getItem('doctorList')){
      this.doctorList = JSON.parse(sessionStorage.getItem('doctorList'))
    }
    this.getuserinfo()
  },
  methods: {
    //获取用户信息及mstr
    getuserinfo() {
      userinfo(sessionStorage.getItem("mstr")).then(res => {
        if (res.data.status === 1) {
          if (sessionStorage.getItem("register") == 1) {
            sessionStorage.setItem("userinfo", JSON.stringify(res.data.data));
            this.getDoctorList();
          } else {
            if (!res.data.data.phone) {
              this.$router.push({
                path: "/register"
              });
              sessionStorage.setItem("register", 1);
            } else {
              sessionStorage.setItem("userinfo", JSON.stringify(res.data.data));
              this.getDoctorList();
            }
          }
        } else {
          getMstr().then(res => {
            if (res.data.status === 1) {
              window.location.href = res.data.data.url;
            }
          });
        }
      });
    },
    //获取我绑定的医生列表
    getDoctorList() {
      let mstr = sessionStorage.getItem("mstr");
      mydoctors(mstr).then(res => {
        if (res.data.status === 1) {
          if (!res.data.data[this.navIdx]) {
            this.navIdx = 0;
          }
          this.doctorList = res.data.data;
          this.doctorActive = {
            avatar: res.data.data[this.navIdx].avatar,
            doctorname: res.data.data[this.navIdx].doctorname,
            online_status: res.data.data[this.navIdx].online_status,
            doctorid: res.data.data[this.navIdx].doctorid,
            userid: res.data.data[this.navIdx].userid
          };
          this.getCurrentDoctorInfo();
          sessionStorage.setItem('doctorList',JSON.stringify(this.doctorList))
        } else {
          this.doctorList = [];
          this.showLoading = false;
        }
      });
    },
    //获取当前医生的详情
    getCurrentDoctorInfo() {
      let mstr = sessionStorage.getItem("mstr");
      mydoctorsinfo(mstr, this.doctorActive.doctorid).then(res => {
        if (res.data.status === 1) {
          this.doctorInfo = res.data.data;
          this.$nextTick(() => {
            this.top = this.$refs.doctorFixed.offsetHeight;
          });
        }
        this.showLoading = false;
      });
    },
    //去查看处方详情
    goDurgDetail(id,status){
      let recipeData = {
        recipeid: id,
        type: 0
      }
      sessionStorage.setItem('recipeData',JSON.stringify(recipeData))
      this.$router.push({
        name: "fillDurg"
      });
    },
    //去医生详情
    goDetail(doctorid) {
      this.$router.push({
        name: "doctorDetail",
        params: {
          id: doctorid
        }
      });
    },
    //在线找名医
    findDoctorTap() {
      this.$router.push({
        name: "doctor"
      });
    },
    //去附近门诊与专家视频
    videoChatTap() {
      this.$router.push({
        name: "map"
      });
    },
    //输入电话号码
    phoneInput(e) {
      if (this.isTel(this.phone)) {
        this.codeFlag = false;
      } else {
        this.codeFlag = true;
      }
    },
    //手机号码验证函数
    isTel(tel) {
      return /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(
        tel
      );
    },
    //获取手机验证码
    getCodeTap() {
      let mstr = sessionStorage.getItem("mstr");
      if (this.isTel(this.phone) && !this.codeFlag) {
        sendsms(mstr, this.phone).then(res => {
          if (res.data.status === 1) {
            this.codeFlag = true
            this.getCodeTxt = "60" + "s"
            this.count(60)
          } else {
            Toast({
              message: res.data.info,
              position: "center",
              duration: 5000
            });
          }
        });
      }
    },
    //验证码按钮倒计时
    count(num) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        --num;
        if (num == 0) {
          this.codeFlag = false
          this.getCodeTxt = "获取验证码"
        } else {
          this.getCodeTxt = num + "s"
          this.count(num);
        }
      }, 1000);
    },
    //确定
    goChatTrueTap() {
      let mstr = sessionStorage.getItem("mstr");
      if (!this.isTel(this.phone)) {
        Toast({
          message: "请输入有效号码",
          position: "center",
          duration: 5000
        });
        return false;
      }
      if (!this.code.replace(/(^\s*)|(\s*$)/g, "")) {
        Toast({
          message: "请输入验证码",
          position: "center",
          duration: 5000
        });
        return false;
      }
      let options = {
        mstr,
        phone: this.phone,
        verify_code: this.code
      };
      updateuserinfo(options).then(res => {
        if (res.data.status === 1) {
          this.phoneShow = false;
          this.isHavePhone();
        }
      });
    },
    changeDoctorTap(index) {
      (this.navIdx = index),
        (this.doctorActive = {
          avatar: this.doctorList[index].avatar,
          doctorname: this.doctorList[index].doctorname,
          online_status: this.doctorList[index].online_status,
          doctorid: this.doctorList[index].doctorid,
          userid: this.doctorList[index].userid
        });
      this.getCurrentDoctorInfo();
    },
    //去问诊页面
    goChatTap() {
      // MessageBox({
      //   title: '温馨提示',
      //   message: '客官，该功能暂未开放，请选择去门诊挂号',
      //   showCancelButton: false,
      //   confirmButtonText:'去附近门诊挂号',
      // }).then(action => {
      //   this.$router.push({
      //       name:'map'
      //   })
      // })
      // return false
      this.isHavePhone();
    },
    //查看病例
    goCaseTap() {
      this.isHavePhone();
    },
    //判断患者是否填写过手机号码
    isHavePhone() {
      let mstr = sessionStorage.getItem("mstr");
      userinfo(mstr).then(res => {
        if (res.data.status === 1) {
          if (res.data.data.phone) {
            this.patientid = res.data.data.patientid
            this.userid = res.data.data.userid
            sessionStorage.setItem("userinfo", JSON.stringify(res.data.data));
            this.navigateToTap(res.data.data.patientid, res.data.data.userid);
          } else {
            this.phoneShow = true;
          }
        }
      });
    },
    //跳转问诊页面
    navigateToTap(patientid, userid) {
      this.$router.push({
        name: "reword",
        params: {
          doctorid: this.doctorActive.doctorid,
          doctoruserid: this.doctorActive.userid,
          patientid: patientid,
          userid: userid
        }
      });
    },
    //关闭弹窗
    closeTap() {
      clearTimeout(this.timer); //清除定时器
      this.phoneShow = false
      this.codeFlag = true
      this.getCodeTxt = "获取验证码"
      this.phone = ""
    }
  },
  components: {
    Bar
  },
  props: {}
};
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/ask/ask.wxss */
.bold {
  font-weight: bold;
}

.red {
  color: #db5033;
}

.border {
  border-bottom: 1px solid #f2e3d0;
}

/* 头部医生滚动 */

.doctor-fixed {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  max-width: 750px;
  margin: 0 auto;
}

.doctor-wrap {
  padding: torem(10px) torem(40px) torem(10px) torem(20px);
  position: relative;
  background: #fff;
}

.doctor-wrap .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: torem(32px);
}

.doctor-wrap .line img {
  width: 100%;
  height: torem(32px);
}

.doctor-wrap .doctor-active {
  position: relative;
  align-items: center;
  padding: torem(30px) 0 torem(30px) 0;
  width: torem(200px);
}

.doctor-active img {
  width: torem(109px);
  height: torem(109px);
  border-radius: 50%;
  margin-bottom: torem(20px);
}

.doctor-active .name {
  color: #db5033;
  font-size: torem(30px);
  line-height: torem(30px);
  max-width: torem(200px);
}

.doctor-active .status {
  width: torem(60px);
  height: torem(36px);
  background-color: #008000;
  border-radius: torem(10px);
  position: absolute;
  align-items: center;
  justify-content: center;
  left: torem(15px);
  top: torem(15px);
  color: #fff;
  font-size: torem(22px);
}

.doctor-wrap .doctor {
  width: torem(540px);
  overflow-x: scroll;
  display: block;
  white-space: nowrap;
  padding: torem(30px) 0 torem(30px) torem(36px);
}

.doctor-wrap .doctor-list {
  margin-right: torem(42px);
  display: inline-block;
  position: relative;
  text-align: center;
}

.doctor-list img {
  width: torem(89px);
  height: torem(89px);
  border-radius: 50%;
  margin-bottom: torem(20px);
}

.doctor-list .name {
  color: #333;
  font-size: torem(24px);
  line-height: torem(24px);
  text-align: center;
  display: block;
  max-width: torem(120px);
}

.doctor-list .status {
  width: torem(49px);
  height: torem(31px);
  background-color: #fff;
  border-radius: torem(10px);
  position: absolute;
  align-items: center;
  justify-content: center;
  left: torem(-15px);
  top: torem(-10px);
  color: #008000;
  border: solid 1px #008000;
  font-size: torem(18px);
}

.doctor-list.busy .status,
.doctor-active.busy .status {
  color: #333;
  border: 1px solid #7f7f7f;
  background: #fff;
}

/* 医生具体信息 */

.infomation-wrap {
  background: #fff;
}

.infomation-wrap .infomation-item {
  padding: torem(30px);
  font-size: torem(28px);
  color: #333;
  align-items: center;
}
.infomation-wrap .infomation-item.start{
  align-items: flex-start;
}

.infomation-item .label {
  color: #bf8541;
  font-size: torem(30px);
}

.infomation-item .tips {
  color: #808080;
  font-size: torem(24px);
  margin-top: torem(10px);
}

.infomation-item .txt {
  flex: 1;
  max-width: torem(560px);
  align-items: center;
}

.infomation-item .txt .tips {
  margin-top: 0;
  margin-left: torem(10px);
  font-weight: normal;
}

/* 诊断记录 */

.diagnose-wrap {
  min-height: torem(320px);
  overflow-y: scroll;
}

.diagnose-item .time {
  color: #9a9183;
  font-size: torem(24px);
  background-color: #dbd6ce;
  border-radius: torem(10px);
  width: torem(520px);
  text-align: center;
  margin: torem(26px) auto torem(12px);
  display: block;
  padding: torem(12px) 0;
}

.content {
  width: 100%;
  background: #fff;
  padding: torem(20px) torem(30px);
}

.content .content-item {
  font-size: torem(28px);
  color: #333;
  padding: torem(10px) 0;
}

.content-item .bold {
  font-size: torem(30px);
}

.content-item .bill-img {
  width: torem(181px);
  height: torem(112px);
  border-radius: torem(6px);
}

.content-item .txt {
  flex: 1;
}

.content-item .txt.recipe {
  line-height: torem(45px);
}

.content-item .item-left .status {
  border-radius: torem(6px);
  border: solid 1px #bf8541;
  font-size: torem(24px);
  color: #bf8541;
  padding: torem(5px) torem(15px);
}

.between.item-left {
  flex: 1;
}

.online {
  width: torem(290px);
  height: torem(80px);
  background-color: #db5033;
  border-radius: torem(6px);
  color: #fff;
  font-size: torem(28px);
  position: relative;
  margin: torem(50px) auto torem(150px);
}

.online .online-btn {
  width: 100%;
  height: 100%;
  background-color: #db5033;
  border-radius: torem(6px);
  color: #fff;
  font-size: torem(28px);
  align-items: center;
  justify-content: center;
}

.online .num {
  width: torem(34px);
  height: torem(34px);
  background-color: #29c626;
  color: #fff;
  font-size: torem(24px);
  position: absolute;
  top: torem(-10px);
  right: torem(-10px);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.redio-wrap {
  position: fixed;
  right: torem(10px);
  bottom: torem(150px);
  color: #bf8541;
  font-size: torem(22px);
  width: torem(200px);
  align-items: center;
  justify-content: center;
}

.redio-wrap .avaral-img {
  width: torem(89px);
  height: torem(89px);
  border-radius: 50%;
  margin-bottom: torem(10px);
}

.redio-wrap .redio-img {
  width: torem(41px);
  height: torem(41px);
  border-radius: 50%;
  position: fixed;
  right: torem(115px);
  bottom: torem(190px);
}

.radio-wrap {
  position: absolute;
  left: torem(20px);
  bottom: torem(100px);
  color: #fff;
  font-size: torem(22px);
  width: torem(200px);
  align-items: center;
  justify-content: center;
}

.radio-wrap .radio-img {
  width: torem(97px);
  height: torem(98px);
  margin-bottom: torem(10px);
}

/* 无诊断记录时 */

.empty-wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: torem(100px);
  max-width: 750px;
  margin: 0 auto;
}

.empty-wrap .bg {
  width: 100%;
  height: 100%;
}

.empty-wrap .intro {
  position: absolute;
  padding-top: torem(125px);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  color: #fff;
  font-size: torem(34px);
  font-weight: bold;
}

.empty-wrap .intro .txt {
  margin-bottom: torem(50px);
}

.empty-wrap .intro .find-btn {
  width: torem(320px);
  height: torem(90px);
  background-color: #db5033;
  border-radius: torem(8px);
  align-items: center;
  justify-content: center;
  margin-top: torem(140px);
  color: #fff;
}

.consult-btn {
  position: fixed;
  left: torem(24px);
  bottom: torem(96px);
  font-size: torem(22px);
  color: #fff;
  align-items: center;
}

.consult-btn img {
  width: torem(97px);
  height: torem(98px);
  margin-bottom: torem(20px);
}

/* 弹窗 */

.windows {
  width: torem(560px);
  background: #fff;
  border-radius: torem(10px);
  padding-bottom: torem(30px);
}

.windows .title {
  padding: torem(30px) torem(40px);
  color: #333;
  font-size: torem(30px);
  font-weight: bold;
  position: relative;
  width: 100%;
}

.windows .title p {
  width: torem(400px);
}

.windows .title img {
  width: torem(50px);
  height: torem(50px);
}

.windows .close-wrap {
  width: torem(100px);
  height: torem(100px);
  position: absolute;
  align-items: center;
  justify-content: flex-end;
  right: torem(20px);
  top: 50%;
  transform: translateY(-50%);
}

/* 填写手机号码*/

.windows .form-wrap {
  padding: torem(40px) torem(30px) torem(40px) torem(20px);
}

.form-wrap .form-item {
  align-items: center;
  margin-bottom: torem(20px);
}

.form-item .label {
  color: #333;
  font-size: torem(28px);
  width: torem(120px);
  justify-content: flex-end;
}

.form-item input {
  height: torem(60px);
  border-radius: torem(6px);
  border: solid 2px #999;
  flex: 1;
  margin-left: torem(20px);
  padding-left: torem(20px);
  font-size: torem(28px);
}

.form-item .get-code {
  width: torem(120px);
  height: torem(60px);
  background-color: #d55940;
  border-radius: torem(6px);
  font-size: torem(20px);
  color: #fff;
  justify-content: center;
  align-items: center;
  margin-left: torem(20px);
}

.form-item .get-code.disabled {
  background: #999;
}

.windows .pay-btn {
  width: torem(269px);
  height: torem(86px);
  background-color: #d55940;
  border-radius: torem(6px);
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: torem(32px);
  margin: 0 auto;
  font-weight: bold;
}

/* 待抓药 */

.content-item .title {
  color: #db5033;
  font-size: torem(26px);
  font-weight: bold;
  padding: 0 0 torem(10px) 0;
}

.content-item .tips {
  margin: 0;
  font-size: torem(20px);
}
</style>